﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Demo/DemoMaster.master" %>

<%@ Import Namespace="System.Web.Services" %>
<script runat="server">
    public class DemoModel
    {
        public Guid ID { get; set; }
        public string Name { get; set; }
        public float GPA { get; set; }
        public DateTime Birthday { get; set; }
        public bool Graduated { get; set; }
        public int Gender { get; set; }
        public string Bio { get; set; }
        public int Major { get; set; }
        public int[] Hobbies { get; set; }
    }

    [WebMethod]
    public static DemoModel GetDemoModel()
    {
        return new DemoModel()
        {
            ID = Guid.NewGuid(),
            Name = "Thomas",
            Bio = "I am a good student",
            GPA = 3.8f,
            Graduated = true,
            Gender = 0,
            Birthday = new DateTime(1985, 11, 4),
            Major = 1,
            Hobbies = new int[] { 3, 5, 7, 8 }
        };
    }

    [WebMethod]
    public static void SetDemoModel(DemoModel model)
    {
        //write your code to handle this model...
    }
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="demoheader" runat="Server">
    Edit page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="demosubheader" runat="Server">
    Use <span>$.doPostback</span> and <span>Object Helper</span> to edit a recode
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="democontent" runat="Server">
    <script type="text/javascript" src="../jQueryClient/object.js"></script>
    <script type="text/javascript" src="../jQueryClient/postback.js"></script>
    <script type="text/javascript" src="../jQueryClient/dataformat.js"></script>
    <script type="text/javascript" src="../jQueryClient/datejs.js"></script>
    <link rel="stylesheet" href="../css/overcast/jquery-ui-1.8.20.custom.css" />
    <script type="text/javascript" src="../js/jquery-ui-1.8.20.custom.min.js"></script>
    <style type="text/css">
        div#divDetail
        {
            margin-bottom:15px;
        }
        
        div#csharp
        {
            margin-top: 20px;
        }
    </style>
    <div id="divDetail">
        <input type="hidden" name="ID" />
        <table class="detail">
            <tr>
                <td>
                    Name:
                </td>
                <td>
                    <input name="Name" />
                </td>
            </tr>
            <tr>
                <td>
                    Bio:
                </td>
                <td>
                    <textarea rows="3" cols="18" name="Bio"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    Birthday:
                </td>
                <td>
                    <input name="Birthday" />
                </td>
            </tr>
            <tr>
                <td>
                    GPA:
                </td>
                <td>
                    <input type="text" name="GPA" />
                </td>
            </tr>
            <tr>
                <td>
                    Graduated?
                </td>
                <td>
                    <input type="checkbox" name="Graduated" />
                </td>
            </tr>
            <tr>
                <td>
                    Gender:
                </td>
                <td>
                    <input type="radio" name="Gender" value="0" />
                    Male
                    <input type="radio" name="Gender" value="1" />
                    Female
                </td>
            </tr>
            <tr>
                <td>
                    Birthday:
                </td>
                <td>
                    <input type="text" id="birthday" class="birthday" name="Birthday" />
                </td>
            </tr>
            <tr>
                <td>
                    Major:
                </td>
                <td>
                    <select name="Major">
                        <option value="0">Select</option>
                        <option value="1">Computer Scinece</option>
                        <option value="2">Information Technology</option>
                        <option value="3">Software Engineering</option>
                        <option value="4">Game Design</option>
                        <option value="5">Information Security and Forensics</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    Hobbies:
                </td>
                <td>
                    <table>
                        <tr>
                            <td>
                                <input type="checkbox" name="Hobbies" value="1" />
                                Football
                            </td>
                            <td>
                                <input type="checkbox" name="Hobbies" value="2" />
                                Basketball
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" name="Hobbies" value="3" />
                                Soccer
                            </td>
                            <td>
                                <input type="checkbox" name="Hobbies" value="4" />
                                Volleyball
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" name="Hobbies" value="5" />
                                Baseball
                            </td>
                            <td>
                                <input type="checkbox" name="Hobbies" value="6" />
                                Softball
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="checkbox" name="Hobbies" value="7" />
                                Tennis
                            </td>
                            <td>
                                <input type="checkbox" name="Hobbies" value="8" />
                                Badminton
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <input type="button" value="Submit" onclick="Submit()" />
    <div id="csharp">
        <a class="rotation">
            <img alt="closed" style="height: 12px;" src="../img/closed.png" />C#</a>
        <div class="codeblock">
            <pre name="javascriptcode" class="js:nocontrols">
    public class DemoModel
    {
        public Guid ID { get; set; }
        public string Name { get; set; }
        public float GPA { get; set; }
        public DateTime Birthday { get; set; }
        public bool Graduated { get; set; }
        public int Gender { get; set; }
        public string Bio { get; set; }
        public int Major { get; set; }
        public int[] Hobbies { get; set; }
    }

    [WebMethod]
    public static DemoModel GetDemoModel()
    {
        return new DemoModel()
        {
            ID = Guid.NewGuid(),
            Name = "Thomas",
            Bio = "I am a good student",
            GPA = 3.8f,
            Graduated = true,
            Gender = 0,
            Birthday = new DateTime(1985, 11, 4),
            Major = 1,
            Hobbies = new int[] { 3, 5, 7, 8 }
        };
    }

    [WebMethod]
    public static void SetDemoModel(DemoModel model)
    {
        //write your code to handle this model...
    }
        </pre>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $("#divDetail input[name='Birthday']").datepicker({
                dateFormat: "mm/dd/yy"
            });

            $.doPostback("GetDemoModel", {}, function (data) {
                //format datetime value
                data.d.Birthday = $d.datetime.format(data.d.Birthday, "MM/dd/yyyy");
                $("#divDetail").setObject(data.d);
            });
        });

        function Submit() {
            var obj = $("#divDetail").pushObject();
            //convert the datetime value back to the standard format
            obj.Birthday = $d.datetime.format(obj.Birthday, null, "MM/dd/yyyy");
            $.doPostback("SetDemoModel", { model: obj });
        }
    </script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="javascript" runat="Server">
    <pre name="javascriptcode" class="js:nocontrols">
        $(function () {
            $.doPostback("GetDemoModel", {}, function (data) {
                //format datetime value
                data.d.Birthday = $d.datetime.format(data.d.Birthday, "MM/dd/yyyy");
                $("#divDetail").setObject(data.d);
            });
        });

        function Submit() {
            var obj = $("#divDetail").pushObject();
            //convert the datetime value back to the standard format
            obj.Birthday = $d.datetime.format(obj.Birthday, null, "MM/dd/yyyy");
            $.doPostback("SetDemoModel", { model: obj });
        }
    </pre>
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="html" runat="Server">
    <pre name="htmlcode" class="html:nocontrols">
    &lt;div id=&quot;divDetail&quot;&gt;
        &lt;input type=&quot;hidden&quot; name=&quot;ID&quot; /&gt;
        &lt;table class=&quot;detail&quot;&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    Name:
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;input name=&quot;Name&quot; /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    Bio:
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;textarea rows=&quot;3&quot; cols=&quot;18&quot; name=&quot;Bio&quot;&gt;&lt;/textarea&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    Birthday:
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;input name=&quot;Birthday&quot; /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    GPA:
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;input type=&quot;text&quot; name=&quot;GPA&quot; /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    Graduated?
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;input type=&quot;checkbox&quot; name=&quot;Graduated&quot; /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    Gender:
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;input type=&quot;radio&quot; name=&quot;Gender&quot; value=&quot;0&quot; /&gt;
                    Male
                    &lt;input type=&quot;radio&quot; name=&quot;Gender&quot; value=&quot;1&quot; /&gt;
                    Female
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    Birthday:
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;input type=&quot;text&quot; id=&quot;birthday&quot; class=&quot;birthday&quot; name=&quot;Birthday&quot; /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    Major:
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;select name=&quot;Major&quot;&gt;
                        &lt;option value=&quot;0&quot;&gt;Select&lt;/option&gt;
                        &lt;option value=&quot;1&quot;&gt;Computer Scinece&lt;/option&gt;
                        &lt;option value=&quot;2&quot;&gt;Information Technology&lt;/option&gt;
                        &lt;option value=&quot;3&quot;&gt;Software Engineering&lt;/option&gt;
                        &lt;option value=&quot;4&quot;&gt;Game Design&lt;/option&gt;
                        &lt;option value=&quot;5&quot;&gt;Information Security and Forensics&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    Hobbies:
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;table&gt;
                        &lt;tr&gt;
                            &lt;td&gt;
                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;1&quot; /&gt;
                                Football
                            &lt;/td&gt;
                            &lt;td&gt;
                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;2&quot; /&gt;
                                Basketball
                            &lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;
                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;3&quot; /&gt;
                                Soccer
                            &lt;/td&gt;
                            &lt;td&gt;
                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;4&quot; /&gt;
                                Volleyball
                            &lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;
                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;5&quot; /&gt;
                                Baseball
                            &lt;/td&gt;
                            &lt;td&gt;
                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;6&quot; /&gt;
                                Softball
                            &lt;/td&gt;
                        &lt;/tr&gt;
                        &lt;tr&gt;
                            &lt;td&gt;
                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;7&quot; /&gt;
                                Tennis
                            &lt;/td&gt;
                            &lt;td&gt;
                                &lt;input type=&quot;checkbox&quot; name=&quot;Hobbies&quot; value=&quot;8&quot; /&gt;
                                Badminton
                            &lt;/td&gt;
                        &lt;/tr&gt;
                    &lt;/table&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;
    &lt;input type=&quot;button&quot; value=&quot;Submit&quot; onclick=&quot;Submit()&quot; /&gt;
    </pre>
</asp:Content>
